<template>
  <div class="order-detail">

    <!-- 订单信息 -->
    <section class="order-info">
      <h2>订单信息</h2>
      <div class="btn">
        <el-button type="primary" @click="handleBack">返回</el-button>

      </div>
      <ul>
        <li><span class="label">订单编号：</span>{{ order.orderId }}</li>
        <li><span class="label">订单渠道：</span>{{ order.channel }}</li>
        <li><span class="label">下单时间：</span>{{ order.orderTime }}</li>
        <li><span class="label">付款时间：</span>{{ order.paymentTime }}</li>
        <!-- <li><span class="label">订单备注：</span>{{ order.notes }}</li> -->
      </ul>
    </section>

    <!-- 收货人信息 -->
    <section class="shipping-info">
      <h2>收货人信息</h2>
      <ul>
        <li><span class="label">收货人：</span>{{ shipping.name }}</li>
        <li><span class="label">联系电话：</span>{{ shipping.phone }}</li>
        <li><span class="label">商家名称：</span>{{ shipping.businessName }}</li>
        <li><span class="label">收货地址：</span>{{ shipping.address }}</li>
      </ul>
    </section>

    <!-- 骑手信息 -->
    <section class="rider-info">
      <h2>骑手信息</h2>
      <ul>
        <li><span class="label">骑手名称：</span>{{ rider.name }}</li>
        <li><span class="label">联系电话：</span>{{ rider.phone }}</li>
      </ul>
    </section>

    <!-- 商品信息 -->
    <!-- <section class="product-info">
      <h2>商品信息</h2>
      <table>
        <thead>
          <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>总计</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(product, index) in products" :key="index">
            <td>{{ product.name }}</td>
            <td>{{ product.price | currency }}</td>
            <td>{{ product.quantity }}</td>
            <td>{{ product.total | currency }}</td>
          </tr>
        </tbody>
      </table>
    </section> -->
    <section class="tableBox">
      <h2>商品信息</h2>

      <CommonTable :columns="orderDetailColumns" :table-data="tableData" :pagination="pagination" style="flex: 1"
        :height="500">
        <template #img="{ row }">
          <el-image style="width: 100px; height: 100px" :src="assetsUrl + row.dishesImgUrl"
            :preview-src-list="[assetsUrl + row.dishesImgUrl]" :fit="'fill'"></el-image>
        </template>
      </CommonTable>
    </section>
  </div>
</template>

<script>
import { orderDetailColumns } from "./columns"

export default {
  data() {
    return {
      assetsUrl: '',

      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 10,
      },
      orderDetailColumns,//表头列
      tableData: [
      ],
      order: {
        orderId: '123456',
        channel: 'App',
        orderTime: '2024-11-01 10:00:00',
        paymentTime: '2024-11-01 10:30:00',
        notes: '请尽快配送',
      },
      shipping: {
        name: '张三',
        phone: '13800000000',
        businessName: '北京XX商店',
        address: '北京市朝阳区XX街道',
      },
      rider: {
        name: '李四',
        phone: '13900000000',
      },
      products: [
        { name: '商品1', price: 100, quantity: 2, total: 200 },
        { name: '商品2', price: 50, quantity: 1, total: 50 },
      ],
    };
  },
  filters: {
    currency(value) {
      return `￥${value.toFixed(2)}`;
    },
  },
  created() {
    console.log(this.$route, 'route');
    const data = this.$route.query.row
    this.order.orderId = data.id
    this.order.channel = 'App'
    this.order.orderTime = data.createTime
    this.order.paymentTime = data.createTime
    this.shipping.name = data.uname || '张三'
    this.shipping.phone = data.uphone || '13800000000'
    this.shipping.businessName = data.businessName || '北京XX商店'
    this.shipping.address = data.address || '北京市朝阳区XX街道'
    this.rider.name = '外卖小王'
    this.rider.name = '13613125822'

    this.tableData = data.orderDetailList
    this.pagination.total = data.orderDetailList.length

  },
  mounted() {
    this.assetsUrl = process.env.VUE_APP_ASSETSURL
  },
  methods: {
    handleBack() {
      this.$router.back()
    }
  }
};
</script>

<style lang="less" scoped>
.order-detail {
  padding: 30px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.order-info {
  position: relative;

  .btn {
    position: absolute;
    top: 10px;
    right: 18px;
  }
}

section {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #f2f2f2;
  padding-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  margin: 10px 0;
  font-size: 16px;
  color: #555;
}

.label {
  font-weight: 600;
  color: #333;
}

.shipping-info li,
.rider-info li {
  background-color: #f7f7f7;
  border-radius: 6px;
  padding: 10px;
}

.product-info table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.product-info th,
.product-info td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

.product-info th {
  background-color: #fafafa;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.product-info td {
  font-size: 14px;
  color: #666;
}

.product-info tr:hover {
  background-color: #f1f1f1;
}

.product-info td {
  padding: 12px 10px;
}

.product-info td:first-child {
  font-weight: 500;
}

.product-info td:last-child {
  text-align: right;
}

.product-info .total-cell {
  font-weight: bold;
  color: #e64a19;
}

.tableBox {
  height: 500px;
  display: flex;
  flex-direction: column;

  ::v-deep {
    .elTable {
      padding: 0;
    }
  }
}

@media (max-width: 768px) {
  .order-detail {
    padding: 15px;
  }

  .order-detail section {
    padding: 15px;
  }

  h2 {
    font-size: 18px;
  }

  ul {
    padding-left: 10px;
  }

  .label {
    font-weight: 600;
    color: #333;
  }

  .product-info table {
    font-size: 12px;
  }

  .product-info th,
  .product-info td {
    padding: 8px;
  }

}
</style>
